<template>
    <div class="expert-nav">
        <div class="expert-nav-item" :class="{ active: category === 'Master' }" @click="changeTab('Master')">
            大师精析
        </div>
        <div
            class="expert-nav-item"
            :class="{ active: category === 'IntelligentRecommendation' }"
            @click="changeTab('IntelligentRecommendation')"
        >
            智能推荐
        </div>
        <div class="expert-nav-item" :class="{ active: category === 'Expert' }" @click="changeTab('Expert')">
            专家推荐
        </div>
    </div>
</template>

<script>
export default {
    name: 'DuoduocaiH5NavCategory',

    data() {
        return {
            category: this.expertNavCategory,
        };
    },
    props: {
        expertNavCategory: String,
    },
    methods: {
        changeTab(val) {
            if (this.category === val) return;
            switch (val) {
                case 'Master':
                    this.$router.push({ name: 'Master' });
                    break;
                case 'IntelligentRecommendation':
                    this.$router.push({ name: 'IntelligentRecommendation' });
                    break;
                case 'Expert':
                    this.$router.push({ name: 'Expert' });
                    break;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.expert-nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    background-color: #fff;
    align-items: center;
    .expert-nav-item {
        position: relative;
        width: 110px;
        font-size: 17px;
        color: #333;
        text-align: center;
        line-height: 44px;
    }
    .expert-nav-item.active {
        color: #f84948;
        font-size: 20px;
        font-weight: bold;
    }
    .expert-nav-item::before {
        position: absolute;
        left: 50%;
        bottom: 2px;
        content: '';
        z-index: 2;
        width: 20px;
        height: 5px;
        margin-left: -10px;
        background: transparent;
    }
    .expert-nav-item.active::before {
        background: url()
            no-repeat center center;
        background-size: contain;
    }
}
</style>
